<template>
  <div class="wrap">
    <div class="login">
      <!--<h1 class="title">{{msg}}</h1>-->
      <!--<el-input class="margin" type="text" id="username" v-model="username" placeholder="用户名" circle></el-input>-->
      <!--<el-input class="margin" type="password" id="password" v-model="password" placeholder="密码" circle></el-input>-->
      <!--&lt;!&ndash;<el-checkbox class="remeber" v-model="checked">记住密码</el-checkbox>&ndash;&gt;-->
      <!--<el-button class="max-width" type="primary" v-on:click="submitData" id="login"  round>登    录</el-button>-->
      <!--<p v-if="errors.length">-->
      <!--<b>Please correct the following error(s):</b>-->
      <!--<ul>-->
      <!--<li v-for="error in errors" >{{ error }}</li>-->
      <!--</ul>-->
      <!--</p>-->
      <!--<el-container>-->
      <el-form :model="userForm" :rules="rules" ref="userForm" @validate="onValidated">
        <el-form-item class="msg">
          <h1>{{msg}}</h1>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" @input="onUsernameInput"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" @input="onPasswordInput" @keyup.enter.native="onKeyupEnter"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="max-width" type="primary" @click="startLogin" round :disabled="login_btn_status">登录</el-button>
        </el-form-item>
      </el-form>
      <!--</el-container>-->
    </div>
    <el-switch style="display: block" class="run_mode"
               v-model="localMode"
               @change="modeChange"
               active-color="#13ce66"
               inactive-color="#ff4949"
               active-text="本地调试"
               inactive-text="远程调试"></el-switch>
    <el-input :value="login_url"></el-input>
  </div>
</template>

<script>
// eslint-disable-next-line
  import ExceptionHandler from '../ExceptionHandler'
export default {
  name: 'Login',
  data () {
    return {
      msg: '登录 CMS',
      login_btn: '登录',
      login_url: getGServerUrl() + '/user/login',
      checked: false,
      login_btn_status: true,
      localMode: true,
      userForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: '输入用户名', trigger: 'blur'},
          {min: 2, max: 16, message: '用户名长度为2-16个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 16, message: '用户名长度为2-16个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    submitForm: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login_btn_status = false
        }
      })
    },
    startLogin: function () {
      const loading = this.$loading()
      loading.setText('正在登录。。。。')
      this.axios.post(this.login_url,
        {
          username: this.userForm.username,
          password: this.userForm.password
        }
      )
        .then(response => {
          console.log(response)
          loading.close()
          let data = response.data.data
          if (data.token === null) {
            this.userForm.password = ''
            this.$message({
              message: data.error,
              type: 'error'
            })
          } else {
            localStorage.setItem('token', data.token)
            localStorage.setItem('username', this.userForm.username)
            localStorage.setItem('loginTime', new Date().getTime())
            localStorage.setItem('host', getGServerUrl())
            this.$message({
              message: '登录成功！',
              type: 'success'
            })
            this.$router.push({path: '/'})
          }
        })
        .catch(error => {
          let msg = 'error'
          if (error.response === undefined) {
            msg = error.message
          } else {
            msg = error.response.data.msg
          }
          this.$message.error(msg)
          // this.login_btn_status = true
          loading.close()
        })
    },
    onValidated: function (obj, bol) {
      // console.log('obj:%o bol:%b', obj, bol)
    },
    onUsernameInput: function (val) {
      this.login_btn_status = !(val.length >= 2 && this.userForm.password >= 6)
    },
    onPasswordInput: function (val) {
      this.login_btn_status = !(val.length >= 6 && this.userForm.username.length >= 2)
    },
    onKeyupEnter: function (event) {
      if (!this.login_btn_status) {
        this.startLogin()
      }
    },
    modeChange: function () {
      if (this.localMode) {
        setGServerUrl(GLocalHost)
      } else {
        setGServerUrl(GRemoteHost)
      }
      this.login_url = getGServerUrl() + '/user/login'
      console.log('current server url is:%s', GServerUrl)
    }
  },
  watch: {
    // observer userForm
    userForm: {
      handler: function (newVal, oldVal) {
        if (newVal.username.length > 1 && newVal.password.length > 5) {
          this.login_btn_status = false
        } else {
          if (!this.login_btn_status) this.login_btn_status = true
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped>
body{
  margin: 0 auto;
}
.wrap{
  width: 100%;
  height: 100%;
  background-image: url("../assets/login-bg.jpg");
  background-size: cover;
}
.login{
  width: 20rem;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  position: absolute;
  background: #ffffffb8;
  padding: 20px 30px;
  border-radius: 10px;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.msg{
  text-align: center;
}
.max-width{
  width: 100%;
}
.remeber{
  float: left;
  margin: 0 0 1rem 1rem;
}
/*.login-btn:hover{*/
  /*background-color: cadetblue;*/
/*}*/
</style>
